import React, { Component } from 'react';
import { TouchableOpacity, View } from 'react-native';
import PropTypes from 'prop-types';
import { colors } from 'bee/themes';
import { px2dp } from 'bee/utils';
import style from './style';

function getRadiusStyle(size) {
  return {
    width: size,
    height: size,
    borderRadius: size / 2,
  };
}

class Radio extends Component {
  constructor(props) {
    super(props);

    // this.state = {
    //   selected: this.props.selected,
    // };

    // eslint-disable-next-line
    this._onPress = this._onPress.bind(this);
  }

  _onPress() {
    const { disabled, onPress } = this.props;

    if (disabled) return;

    onPress(this.props.selected);
  }

  render() {
    const {
      innerColor,
      outerColor,
      outerBorderWidth,
      innerSize,
      outerSize,
      selected,
    } = this.props;

    const innerStyle = [
      getRadiusStyle(innerSize),
      { backgroundColor: innerColor },
    ];
    const outerStyle = [
      getRadiusStyle(outerSize),
      { borderColor: outerColor, borderWidth: outerBorderWidth },
    ];

    return (
      <TouchableOpacity
        style={[style.container, outerStyle]}
        // eslint-disable-next-line
        onPress={this._onPress}
      >
        <View>{selected ? <View style={innerStyle} /> : null}</View>
      </TouchableOpacity>
    );
  }
}

Radio.propTypes = {
  innerColor: PropTypes.string,
  outerColor: PropTypes.string,
  innerSize: PropTypes.number,
  outerSize: PropTypes.number,
  selected: PropTypes.bool,
  disabled: PropTypes.bool,
  outerBorderWidth: PropTypes.number,
  onPress: PropTypes.func.isRequired,
};

Radio.defaultProps = {
  innerColor: colors[1001],
  outerColor: colors[1104],
  outerSize: px2dp(24),
  innerSize: px2dp(14),
  selected: false,
  outerBorderWidth: 1,
  disabled: false,
};

export default Radio;
